<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>重复请求问题</title>
  </head>
  <body>
    <button>点击发送</button>
    <script>
      // 获取元素对象
      const btns = document.querySelectorAll("button");

      // 创建请求对象x
      let x = null;
      // 标识变量
      let isSending = false; //是否正在发送ajax请求

      // 发送请求
      btns[0].onclick = function () {
        // 判断标识变量
        if(isSending){ // 如果正在发送ajax请求
          x.abort(); // 取消请求 
        }
        x = new XMLHttpRequest(); // 创建一个新的请求对象
        // 修改标识变量的值
        isSending = true; // 正在发送ajax请求
        x.open("GET", "http://www.xin.com:8000/delay");
        x.send();
        x.onreadystatechange = function () {
          if (x.readyState === 4) {
            // 请求已返回
            // 修改标识变量
            isSending = false;
          }
        };
      };
    </script>
  </body>
</html>
